<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>孔明灯</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #fff;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 14px;
            color: #fff;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 50vw;
            perspective-origin: 50% 50%;
        }

        .card {
            width: 250px;
            height: 370px;
            margin: 0 10px;
            overflow: hidden;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 110% 110%;
            transform-origin: 50% 50%;
            perspective: 1800px;
            transform-style: preserve-3d;
            border-radius: 8px;
            box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
        }

        .lou {
            background-image: url(./img/lou3.jpg);
        }

        .lou .deng1 {
            height: 16%;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0;
        }

        .lou .deng2 {
            height: 12%;
            position: absolute;
            bottom: 10px;
            left: 50px;
            opacity: 0;
        }

        .lou .deng3 {
            height: 10%;
            position: absolute;
            bottom: 0;
            left: 110px;
            opacity: 0;
        }

        .lou .deng4 {
            height: 3%;
            position: absolute;
            bottom: 30px;
            left: 150px;
            opacity: 0;
        }

        .lou .deng5 {
            height: 6%;
            position: absolute;
            bottom: 30px;
            left: 80px;
            opacity: 0;
        }

        .lou .deng6 {
            height: 3%;
            position: absolute;
            bottom: 50px;
            left: 60px;
            opacity: 0;
        }

        .lou .deng7 {
            height: 5%;
            position: absolute;
            bottom: 110px;
            left: 30px;
            opacity: 0;
        }

        .lou .deng8 {
            height: 5%;
            position: absolute;
            bottom: 10px;
            right: 30px;
            opacity: 0;
        }

        .lou .deng9 {
            height: 5%;
            position: absolute;
            bottom: 60px;
            right: 50px;
            opacity: 0;
        }

        .lou .deng10 {
            height: 6%;
            position: absolute;
            bottom: 110px;
            right: 30px;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="card lou">
        <img class="deng1" src="./img/deng1.png" alt="孔明灯">
        <img class="deng2" src="./img/deng1.png" alt="孔明灯">
        <img class="deng3" src="./img/deng1.png" alt="孔明灯">
        <img class="deng4" src="./img/deng1.png" alt="孔明灯">
        <img class="deng5" src="./img/deng1.png" alt="孔明灯">
        <img class="deng6" src="./img/deng1.png" alt="孔明灯">
        <img class="deng7" src="./img/deng1.png" alt="孔明灯">
        <img class="deng8" src="./img/deng1.png" alt="孔明灯">
        <img class="deng9" src="./img/deng1.png" alt="孔明灯">
        <img class="deng10" src="./img/deng1.png" alt="孔明灯">
    </div>
    <script src="./js/anime.min.js"></script>
    <script>
        let flag = false;
        let dengAnimation = '';
        document.onmousemove = function (e) {
            e = e || window.event;
            let movex = 0;
            let movey = 0;

            if (e.pageX || e.pageY) {
                movex = e.pageX;
                movey = e.pageY
            }

            anime({
                targets: '.card',
                translateX: movex / 30 - 20,
                translateY: movey / 30 - 20,
                rotateX: -movey / 150 - 5,
                rotateY: movex / 150 - 5,
                duration: 1000,
                easing: 'easeOutCirc'
            });

            if (!flag) {
                flag = true;
                dengAnimation = anime({
                    targets: '.card img', //目标对象
                    translateX: [{
                        value: (document.body.clientWidth / 2 > movex ? -1 : 1) * 180 * Math
                            .random(),
                        delay: 500, // 延迟
                    }],
                    translateY: [{
                        value: -290,
                        delay: 500, // 延迟
                    }],
                    opacity: [{
                        value: 1,
                        duration: 500
                    }],
                    scale: 0.1,
                    loop: true, // 循环播放
                    autoplay: true, // 自动播放
                    duration: Math.ceil(5000 * Math.random()), // 持续时间
                    delay: Math.ceil(1000 * Math.random()), // 延迟
                    easing: 'easeInOutQuad', //时间曲线
                    loopComplete: function (anim) {
                        flag = false;
                        dengAnimation.restart();
                    }
                });
            }
        }
    </script>
</body>

</html>